﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowMap.aspx.cs" MasterPageFile="~/Rippoll.Master" Inherits="RipPoll.Web.ShowMap" %>

   <asp:Content ID="Content1" ContentPlaceHolderID="rippollMainBody" runat="server">
   
       <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 80%; width:100%;}
   </style>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">

        var Type;
        var Url;
        var Data;
        var ContentType;
        var DataType;
        var ProcessData;


        $(document).ready(
        function () {
            WCFJSON();
        }
    );


        function WCFJSON() {
            var pollid = "6";
            Type = "POST";
            Url = "PollServices.svc/GetZipCodesForPollid";
            Data = '{"PollId":"' + pollid + '"}';
            ContentType = "application/json; charset=utf-8";
            DataType = "json"; varProcessData = true;
            CallService();
        }


        function CallService() {
            $.ajax({
                type: Type, //GET or POST or PUT or DELETE verb
                url: Url, // Location of the service
                data: Data, //Data sent to server
                contentType: ContentType, // content type sent to server
                dataType: DataType, //Expected data format from server
                processdata: ProcessData, //True or False            
                success: function (msg) {//On Successfull service call                
                    ServiceSucceeded(msg);
                },
                error: ServiceFailed // When Service call fails
            });
        }

        function ServiceFailed(result) {
            alert('Service call failed: ' + result.status + ' ' + result.statusText);
            Type = null;
            varUrl = null;
            Data = null;
            ContentType = null;
            DataType = null;
            ProcessData = null;
        }

        function ServiceSucceeded(result) {

            if (DataType == "json") {
                resultObject = result.d;
                //            for (i = 0; i < resultObject.length; i++) {
                //                alert(resultObject[i]);
                //            }
                Loadmap(resultObject);
            }

        }

        //    function ServiceFailed(xhr) {
        //        alert('failed : ' + xhr.responseText);
        //        if (xhr.responseText) {
        //            var err = xhr.responseText;
        //            if (err)
        //                error(err);
        //            else
        //                error({ Message: "Unknown server error." })
        //        }    
        //        return;
        //    }

        var geocoder;
        var map;
        var image = "images/pushpin.png";

        function Loadmap(ziparr) {
            //alert('Inside Loadmap');        
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(38.898243, -94.704936);
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
                //disableDefaultUI: false,
                //disableDoubleClickZoom: true,
                //draggable: false
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            //            geocoder.geocode({ 'address': 'US' }, function (results, status) {
            //                var ne = results[0].geometry.viewport.getNorthEast();
            //                var sw = results[0].geometry.viewport.getSouthWest();

            //                map.fitBounds(results[0].geometry.viewport);
            //            }); 


            //alert('map loaded');

            //alert('Loading zips');
//            for (var i = 0; i < ziparr.length; i++) {
//                address = ziparr[i];
//                DisplayPin(address);
//            }


            //google.maps.event.trigger(map, "resize");
            //HidePin("66215");

            //map.setCenter(new GLatLng(37.4419, -122.1419), 4);
            //            latlng = new google.maps.LatLng(38.898243, -94.704936);
            //            map.setSenter(latlng);

            //map.setCenter(new GLatLng(38.6, -98));

        }

        function DisplayPin(address) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: address,
                        icon: image
                    });
                }
            });
        }


        function HidePin(address) {
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        title: address,
                        icon: image
                    });
                    marker.hide();
                }
            });
        }

    </script>
     
     
         <table style="width:800px;height:600px; padding-left:25px;">
            <tr>
                <td  style="width:800px; height:500px; vertical-align:top" colspan="2">
                    <div id="map_canvas" style="width:750px; height:500px; vertical-align:top" ></div>
                </td>
            </tr>            
         </table>

    
</asp:Content>